import React, { useState } from 'react'
import { Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { Input, Button, ConfigProvider, Space, DatePicker, Modal, Cascader, Form, InputNumber, Radio, Select, Switch, TreeSelect, } from 'antd';


import {updateuserlabel,} from '../../../../request/api'
export default function User_content(props) {
    const { userdata, gettags,getuserlist } = props;


    let [_id,set_id] = useState('')
    let [name, setname] = useState([])//账号
    let [description, setdescription] = useState([])//密码
    let [color, setcolor] = useState([])//手机号
    let [tagstype, settagstype] = useState([])//角色
    const [modal2Open, setModal2Open] = useState(false); //控制模态框是否显示


    const columns: TableProps<DataType>['columns'] = [
        {
            width: '60%',
            title: '标签名称',
            key: 'name',
            dataIndex: 'name',
            render: (_, record) => (

                <>
                    <Tag color={record.color} key={record.name}>
                        {record.name.toUpperCase()}
                    </Tag>
                </>
            ),
        },
        {
            title: '状态',
            dataIndex: 'tagstype',
            key: 'tagstype',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        datatags(record)
                    }}>编辑</a>
                </Space>
            ),
        },
    ];

    let dataSource = userdata.map(item => ({
        key: item._id,
        name: item.name,
        color: item.color,
        description: item.description,
        tagstype: item.tagstype == true ? '已启用' : '已禁用'
    }));

    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };

    // 数据回显
    const datatags = (item: any) => {
        setModal2Open(true)
        setname(item.name)
        setcolor(item.color)
        setdescription(item.description)
        settagstype(item.tagstype)
        set_id(item.key)
    }

    // 修改标签
    const tagsupdata = async() => {
        let from = {
            _id: _id,
            name: name,
            color: color,
            description: description,
            tagstype: tagstype,
        }
        let res = await updateuserlabel({ from: from })
        if(res.code ==200){
            alert('修改成功')
            getuserlist(res.code)
            setModal2Open(false)
        }
    }

    return (
        <div>
            <Table<DataType> columns={columns} dataSource={dataSource} />
            <Modal
                title='修改标签'
                centered
                open={modal2Open}
                onOk={() => tagsupdata()}
                onCancel={() => setModal2Open(false)}
            >
                <Form
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    initialValues={{ size: componentSize }}
                    onValuesChange={onFormLayoutChange}
                    size={componentSize as SizeType}
                    style={{ maxWidth: 600 }}
                >
                    <Form.Item label="标签名称">
                        <Input value={name} onChange={(e) => {
                            setname(e.target.value)
                        }} />
                    </Form.Item>
                    <Form.Item label="标签颜色" >
                        <Select value={color} onChange={(e) => {
                            setcolor(e)
                        }}>
                            <Select.Option value='red'>红色</Select.Option>
                            <Select.Option value='geekblue'>黄色</Select.Option>
                            <Select.Option value='green'>蓝色</Select.Option>

                        </Select>
                    </Form.Item>
                    <Form.Item label="角色描述">
                        <Input value={description} onChange={(e) => {
                            setdescription(e.target.value)
                        }} />
                    </Form.Item>
                    <Form.Item label="标签颜色" >
                        <Select value={tagstype} onChange={(e) => {
                            settagstype(e)
                        }}>
                            <Select.Option value='true'>启用</Select.Option>
                            <Select.Option value='false'>禁用</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>

            </Modal>
        </div>
    )
}
